<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>{{ title }}</title>
    <link rel="stylesheet" href="../../../resource/css/dropload.css">
    <link rel="stylesheet" href="../../../resource/css/refresh.css">
    <link rel="stylesheet" href="../../../resource/css/rank.css">

</head>
<body>
    <div class="content" id="content">
        <ul id="list">

        </ul>
    </div>
</body>
<!--<script src="../../../resource/js/jquery.min.js"></script>-->
<script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.js"></script>
<script src="../../../resource/js/layer/2.4/layer.js"></script>
<script src='http://app.lxh.magcloud.cc/public/static/dest/js/libs/magjs-x.js'></script>
<script src="../../../resource/js/dropload.min.js"></script>


<script>
    var token;
    mag.toLogin(function (res) {
        token = res.token;
    })
</script>
<script>
    $(function(){
        // 页数
        var page = 0;
        // 每页展示10个
        var size = 10;

        // dropload
        $('.content').dropload({
            scrollArea : window,
            domUp : {
                domClass   : 'dropload-up',
                domRefresh : '<div class="dropload-refresh">↓下拉刷新↓</div>',
                domUpdate  : '<div class="dropload-update">↑释放更新↑</div>',
                domLoad    : '<div class="dropload-load"><span class="loading"></span>加载中...</div>'
            },
            domDown : {
                domClass   : 'dropload-down',
                domRefresh : '<div class="dropload-refresh">↑上拉加载更多↑</div>',
                domLoad    : '<div class="dropload-load"><span class="loading"></span>加载中...</div>',
                domNoData  : '<div class="dropload-noData">没东西了</div>'
            },
            loadUpFn : function(me){
                $.ajax({
                    type: 'POST',
                    url: '/Stick/getUserCoinList',
                    data:{
                        token:token,
                        page:0,
                        size:10
                    },
                    dataType: 'json',
                    success: function(data){
                        page = 1;
                        var list = data.data;
                        var result = '';
                        for(var i = 0; i <list.length; i++){
                            result += '<li><div class="left">\n';
                            if (i < 3){
                                if (i == 0){
                                    result +=  '<img class="remark" src="../../../resource/img/num1.png"/>';
                                } else if (i == 1) {
                                    result +=  '<img class="remark" src="../../../resource/img/num2.png"/>';
                                } else{
                                    result +=  '<img class="remark" src="../../../resource/img/num3.png"/>';
                                }
                            } else{
                                result += (page - 1) * 10 + i + 1;
                            }
                            result += '</div>\n' +
                                '                <div class="center">\n' +
                                '                    <div class="head-img">\n' +
                                '                        <img src="'+ list[i].head +'"/>\n' +
                                '                    </div>\n' +
                                '                    <strong class="name">'+ list[i].name +'</strong>\n' +
                                '                </div>\n' +
                                '                <div class="right">\n' +
                                '                    <span>￥'+ list[i].account_currency +'</span>\n' +
                                '                </div>\n' +
                                '                <div class="clear"></div>\n' +
                                '            </li>';
                        }
                        // 为了测试，延迟1秒加载
                        setTimeout(function(){
                            $('#list').html(result);
                            // 每次数据加载完，必须重置
                            me.resetload();
                            // 重置页数，重新获取loadDownFn的数据
                            // 解锁loadDownFn里锁定的情况
                            me.unlock();
                            me.noData(false);
                        },1000);
                    },
                    error: function(xhr, type){
                        alert('网络出错!');
                        // 即使加载出错，也得重置
                        me.resetload();
                    }
                });
            },
            loadDownFn : function(me){
                var result = '';
                $.ajax({
                    type: 'POST',
                    url: '/Stick/getUserCoinList',
                    data:{
                        token:token,
                        page:page,
                        size:size
                    },
                    dataType: 'json',
                    success: function(data){
                        var list = data.data;
                        var arrLen = data.data.length;
                        if(arrLen > 0){
                            for(var i = 0; i < arrLen; i++){
                                result += '<li><div class="left">\n';
                                if (page == 0) {
                                    if (i < 3){
                                        if (i == 0){
                                            result +=  '<img class="remark" src="../../../resource/img/num1.png"/>';
                                        } else if (i == 1) {
                                            result +=  '<img class="remark" src="../../../resource/img/num2.png"/>';
                                        } else{
                                            result +=  '<img class="remark" src="../../../resource/img/num3.png"/>';
                                        }
                                    } else{
                                        result += page * 10 + i + 1;
                                    }
                                }

                                result += '</div>\n' +
                                    '                <div class="center">\n' +
                                    '                    <div class="head-img">\n' +
                                    '                        <img src="'+ list[i].head +'"/>\n' +
                                    '                    </div>\n' +
                                    '                    <strong class="name">'+ list[i].name +'</strong>\n' +
                                    '                </div>\n' +
                                    '                <div class="right">\n' +
                                    '                    <span>￥'+ list[i].account_currency +'</span>\n' +
                                    '                </div>\n' +
                                    '                <div class="clear"></div>\n' +
                                    '            </li>';
                            }
                            // 如果没有数据
                        }else{
                            // 锁定
                            me.lock();
                            // 无数据
                            me.noData();
                        }
                        page++;
                        // 为了测试，延迟1秒加载
                        setTimeout(function(){
                            // 插入数据到页面，放到最后面
                            $('#list').append(result);
                            // 每次数据插入，必须重置
                            me.resetload();
                        },1000);
                    },
                    error: function(xhr, type){
                        // alert('网络错误!');
                        // 即使加载出错，也得重置
                        me.resetload();
                    }
                });
            },
            threshold : 50
        });
    });
</script>
</html>